<template>
  <el-drawer
    v-if="dialogVisible"
    size="50%"
    :title="title"
    :destroy-on-close="true"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :modal-append-to-body="false"
    @opened="onOpen"
    @closed="onClose"
  >
    <div class="drawer-container">
      <vue-json-editor
        v-model="context"
        :showBtns="true"
        :mode="'code'"
        height="700px"
        lang="zh"
        :expandedOnStart="true"
        @json-change="onJsonChange"
        @json-save="onJsonSave"
      />
    </div>
  </el-drawer>
</template>
  
  <script>
import vueJsonEditor from "vue-json-editor";
import { getOne, save } from "@/api/sysDataxConfig";

export default {
  components: { vueJsonEditor },
  data() {
    return {
      dialogVisible: false,
      title: "",
      id: "",
      context: null,
      options: {
        mode: "code",
      },
      plus: true,
    };
  },
  methods: {
    onShow(id, name) {
      this.id = id;
      this.title = name;
      this.dialogVisible = true;
    },
    onClose() {
      this.dialogVisible = false;
      this.form = this.$options.data().form;
    },
    onOpen() {
      getOne(this.id).then((res) => {
        if (res.code === 20000) {
          this.context = JSON.parse(res.data.context);
        }
      });
    },
    onJsonChange() {},
    onJsonSave() {
      let config = {
        id: this.id,
        context: JSON.stringify(this.context),
      };
      save(config).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.context = JSON.parse(config.context);
        }
      });
    },
  },
};
</script>
  
<style scoped>
.drawer-container {
  height: 100%;
  width: 100%;
}

.el-drawer__wrapper /deep/ .el-drawer__header {
  margin-bottom: 0px !important;
}

.el-drawer__wrapper /deep/ .jsoneditor-outer {
  height: 500px;
}
</style>
  